<template>
    <div id="change-pwd">
        <div class="wrapper">
            <top-bar></top-bar>
            <top-header></top-header>
            <div class="main">
                <div class="main-content">
                    <p class="main-title">
                        <span class="content-title">修改密码</span>
                    </p>
                    <p class="main-list">
                        <span class="list-name">旧密码：</span>
                        <el-input class="list-input" v-model="old_pwd" clearable></el-input>
                    </p>
                    <p class="main-list">
                        <span class="list-name">新密码：</span>
                        <el-input class="list-input" v-model="new_pwd" clearable></el-input>
                    </p>
                    <p class="main-list">
                        <span class="list-name">确认新密码：</span>
                        <el-input class="list-input" v-model="check_pwd" clearable></el-input>
                    </p>
                    <p class="main-list list-btn">
                        <span class="change-btn" @click="getChange">确认修改</span>
                    </p>
                </div>
            </div>
        </div>
        <bottom-tab class="bottom-bar"></bottom-tab>
    </div>
</template>

<script>
import topBar from '@/components/top-bar'
import topHead from '@/components/top-head'
import bottomTab from '@/components/bottom-tab'

let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");

    export default {
        components: {
			'top-bar': topBar,
			'top-header': topHead,
			'bottom-tab': bottomTab
		},
        data() {
            return {
                old_pwd: '',
                new_pwd: '',
                check_pwd: ''
            }
        },
        methods: {
            getChange() {
                let url = CONSTANT.URL.STAFF.CHANGEPWD,
                    param = {
						confirmPwd: this.check_pwd,
                        newPwd: this.new_pwd,
                        oldPwd: this.old_pwd
                    }
                common.requestAjax(url,JSON.stringify(param),null,(res)=>{
                    console.log(res)
                    if(res.status == 200){
                        this.$message({
                            type: 'success',
                            message: '密码修改成功!'
                        });
                        setTimeout(()=>{
                            this.$router.push("/login");
                        },1000)
                    }else{
                        this.$message({
                            type: 'warning',
                            message: res.msg
                        });
                    }
                })
            }
        }
    }
</script>
<style>
#change-pwd .list-input .el-input__inner {
    width: 400px;
    height: 54px;
}
</style>

<style scoped>
#change-pwd {
    position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
}
.wrapper {
    min-height: calc(100vh - 210px);
	padding-bottom: 210px;
    background-color: rgba(245,245,245,1);
}
.bottom-bar {
	position: relative;
    left: 0;
    bottom: 0;
    margin-top: -210px;
    clear: both;
}
.main {
    padding-top: 80px;
    padding-bottom: 100px;
}
.main-content {
    width: 520px;
    margin: 0 auto;
}
.main-title {
    text-align: center;
    height: 38px;
    line-height: 30px;
    margin-bottom: 75px;
}
.content-title {
    font-size: 24px;
    border-bottom: 4px solid rgba(195,24,31,1);
}
.main-list {
    margin-top: 20px;
    text-align: right;
    font-size:18px;
}
.list-input {
    width: 400px;
    height: 54px;
    font-size: 16px;
    line-height: 54px;
    border-radius: 2px;
}
.list-input .el-input__inner {
    width: 400px;
    height: 54px;
}
.main-list.list-btn {
    margin-top: 104px;
}
.main-list .change-btn {
    display: inline-block;
    width: 400px;
    height: 54px;
    line-height: 54px;
    color: #ffffff;
    text-align: center;
    background:rgba(195,24,31,1);
    border-radius:2px;
    cursor: pointer;
}
</style>